<template>
    <div class="word-preview-wrap">
      <div id="wordView" ref="fileRef" class="word-view" v-html="wordText" />
    </div>
  </template>
  
  <script lang="ts" setup>
  import axios from 'axios'
  import {onMounted, ref,watch} from 'vue'
  import { defaultOptions, renderAsync } from "docx-preview";
  import {loadEnv} from '@/utils/env/'
  const {VITE_FILE_URL} = loadEnv();

  const props =defineProps({
    updateFile: {
      type: Object,
      default: {
        status:false,
        timeStamp:new Date().getTime()
      }
    }
  })
  onMounted(()=>{
    goPreview()
  })
  watch(()=>props.updateFile,()=>{
    goPreview()
  })
  let fileRef = ref('')
  let wordText = ref('')
  const goPreview = ()=> {
        axios({
            method: "get",
            responseType: "blob", // 因为是流文件，所以要指定blob类型
            url: `${VITE_FILE_URL}doc/help.doc`, // 自己的服务器，提供的一个word下载文件接口
            // url:  'http://192.168.8.188/doc/help.doc', // 自己的服务器，提供的一个word下载文件接口
        }).then(({ data }) => {
          renderAsync(data, fileRef.value); // 渲染到页面
        });
  }
  
  </script>
  
  <style lang="scss" scoped>
  .word-preview-wrap {
    padding: 15px;
    width: 100%;
    height: 100%;
    .word-view{
        width: 100%;
        height: 100%;
        overflow-y: auto;
        text-align: left;
    }
   
    img {
      width: 100%;
    }
    ::v-deep{
      .docx-wrapper{
            background: transparent !important;
            padding: 10px 30px !important;
      }
      .docx-wrapper>section.docx{
        background: transparent;
        color: #fff;
        width: 100% !important;
        height: 100% !important;
        padding: 20px !important;
        box-sizing: border-box;
      }
    }
    
  }
  </style>
  <style>
  
  </style>